<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>

        ul.ul2{

            list-style-type: none;
            margin: 0;
            padding: 0;

        }

        .xi{

            display: block;
            width: 60px;
            background-color: orange;


        }




    </style>


</head>
<body>
<h2>导航栏</h2>
<hr>
<ul class="ul1">
    <li><a href="#home">home</a> </li>
    <li><a href="#news">news</a> </li>
    <li><a href="#contact">contact</a> </li>
    <li><a href="#about">about</a> </li>

</ul>

<hr>

<h2>删除边距和填充</h2>
<hr>

<ul class="ul2">
    <li><a href="#home">home</a> </li>
    <li><a href="#news">news</a> </li>
    <li><a href="#contact">contact</a> </li>
    <li><a href="#about">about</a> </li>

</ul>
<hr>


<h2>垂直导航栏</h2>
<hr>

<ul class="ul3">
    <li><a class="xi" href="#home">home</a> </li>
    <li><a class="xi" href="#news">news</a> </li>
    <li><a class="xi" href="#contact">contact</a> </li>
    <li><a class="xi" href="#about">about</a> </li>
</ul>






</body>
</html>